<template>
  <div id="goods">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px">
      <el-breadcrumb-item to="/Home">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="card-header">
      <div style="margin: 15px;" class="input-width">
        <el-input v-model="goodList.query" @input="select" @keyup.enter.native="select" clearable placeholder="请输入内容"
                  class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-button type="primary" calss="btn" @click="isAddUser = true">添加用户</el-button>
    </div>
    <el-card class="box">
      <el-card class="box-card">
        <template>
          <el-table
              :data="tableData"
              stripe
              border
              style="width: 99%;height:100%">
            <el-table-column
                type="index"
                label="#"
                width="60"/>
            <el-table-column
                prop="goods_name"
                label="商品名称"
                width="880">
            </el-table-column>
            <el-table-column
                prop="goods_price"
                label="商品价格（元）"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goods_weight"
                label="商品重量">
            </el-table-column>
            <el-table-column
                prop="add_time"
                label="创建时间"
                width="200px">
              <template slot-scope="scope">
                <div>{{ scope.row.add_time|DataTwo }}</div>
              </template>
            </el-table-column>
            <el-table-column
                prop="goods_number"
                label="操作">
                <template slot-scope="scope">
                  <el-button size="mini"
                             type="danger"
                             icon="el-icon-delete"
                             @click="open(scope.row)">
                  </el-button>
                </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
    </el-card>
    <template>
      <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.goodList.pagenum"
            :page-sizes="[ 5,10,15,20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </template>
  </div>
</template>
<script>
import {delgoods, goods} from '@/utils/api'
export default {
  name: '',
  props: {},
  data() {
    return {
      goodList: {
        query: '',
        pagenum: 1,
        pagesize: 4,
      },
      tableData: [],
      total: 0,

    };
  },
  // 子组件转换
  components: {},
  // 数据引入 created
  created() {
    this.goodData()
  },
  mounted() {
  },
  //点击函数事件
  methods: {
    goodData() {
      goods(this.goodList).then(res => {
        this.tableData = res.goods
        this.total = res.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.goodList.pagesize = val
      this.goodData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.goodList.pagenum = val
      this.goodData()
    },
    select() {
    },
    //删除
    open(i) {
      // console.log(typeof(i.goods_id))
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = i.goods_id
        console.log(id)
        delgoods(id).then(res => {
          this.goodData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box {
  height: 70vh;
  overflow-y: auto;
}

.box-card {
  overflow-y: auto;
  height: 100%;
  margin-top: 20px;
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.card-header {
  height: 80px;
}

.input-width {
  width: 500px;
  display: inline-block;
}
</style>